<template>
  <view class="clock-in-default-page">
    <view class="header">
      <view class="placeholder" :style="{height: `${statusBarHeight + 44}px`}" />
      <image :src="headerImg" class="img" />
    </view>
    <view class="main-containier">
      <view class="module">
        <view class="msg-wrap">
          <view class="title">{{ module1.title }}</view>
          <view class="tip">{{ module1.text1 }}</view>
          <view class="time">
            <text>{{ module1.time }}</text>
            <u-icon name="arrow-down" size="15" color="#000" />
          </view>
          <view class="tip">{{ module1.text2 }}</view>
        </view>
        <image :src="module1.icon" class="msg-logo" />
      </view>
      <view class="module">
        <image :src="module2.icon" class="msg-logo" />
        <view class="msg-wrap">
          <view class="title">{{ module2.title }}</view>
          <view class="tip">
            <text>{{ module2.text1 }}</text>
            <text class="count">{{ module2.count }}</text>
            <text>{{ module2.text2 }}</text>
          </view>
          <view class="tip">{{ module2.text3 }}</view>
        </view>
      </view>
    </view>

    <view class="clock-in-btn" @click="openClockIn">{{ btnText }}</view>
  </view>
</template>

<script>
import {
  mapState
} from 'vuex'
import {
  getImg,
  getCurrentPageConfigByName
} from '../../../utils/index.js'
export default {
  name: 'DefaultPage',
  data() {
    return {
      headerImg: '',
      btnText: '开启打卡挑战',
      module1: {
        title: '',
        text1: '',
        time: '',
        text2: '',
        icon: ''
      },
      module2: {
        title: '',
        text1: '',
        count: '',
        text2: '',
        text3: '',
        icon: ''
      }
    }
  },

  computed: {
    ...mapState(['statusBarHeight'])
  },

  mounted() {
    this.initPage()
  },
  methods: {
    initPage() {
      const _this = this
      getCurrentPageConfigByName('打卡-页头').then(res => {
        console.log('打卡-页头--配置数据')
        console.log(res)
        const {
          app_path_set_dt
        } = res
        _this.headerImg = app_path_set_dt.length ? getImg(app_path_set_dt[0].image) : ''
      })

      getCurrentPageConfigByName('打卡-宫格').then(res => {
        const {
          t_text1,
          t_text2,
          t_text3,
          app_path_set_dt
        } = res
        _this.module1.title = t_text1
        _this.module2.title = t_text2
        _this.btnText = t_text3
        const moduleList = app_path_set_dt.sort((a, b) => a.sno - b.sno)
        if (moduleList.length) {
          _this.module1.text1 = moduleList[0].title
          _this.module1.time = moduleList[0].text1
          _this.module1.text2 = moduleList[0].text2
          _this.module1.icon = getImg(moduleList[0].image)

          _this.module2.text1 = moduleList[1].title
          _this.module2.count = moduleList[1].text1
          _this.module2.text2 = moduleList[1].text2
          _this.module2.text3 = moduleList[1].text3
          _this.module2.icon = getImg(moduleList[1].image)
        }
      })
    },
    openClockIn() {
      this.$utils.navigateToPage('/pagesClockIn/clockInSetting')
    }
  }
}
</script>

<style lang="scss" scoped>
	.clock-in-default-page {
		.header {
			position: relative;
			height: 500rpx;
			background: linear-gradient(180deg, #38FFDA 0%, #F7F7F7 100%);

			.img {
				width: 95%;
				height: 360rpx;
				position: absolute;
				left: 50%;
				bottom: 0;
				transform: translateX(-50%);
			}
		}

		.main-containier {
			width: 95%;
			height: 604rpx;
			padding: 0 30rpx;
			margin: 20rpx auto;
			position: relative;
			background-color: #FFF;
			box-shadow: 0 2rpx 6rpx 0 rgba(0, 0, 0, 0.05);
			border-radius: 15rpx;
			-webkit-mask-image: radial-gradient(circle at 10px 50%, transparent 10px, red 10.5px);
			-webkit-mask-position: -10px;

			.module {
				@include flex-between;
				gap: 80rpx;
				// padding: 10rpx 0;

				.msg-logo {
					width: 228rpx;
					height: 228rpx;
				}

				.msg-wrap {
					flex: 1;
					@include flex-center;
					flex-flow: column;

					.title {
						font-size: 35rpx;
						font-weight: bolder;
						padding-bottom: 20rpx;
					}
				}

				&:first-child {
					height: 300rpx;
					// padding-bottom: 30rpx;
					// margin-bottom: 30rpx;
					border-bottom: 1px dashed #F5F5F5;

					.tip {
						color: #818181;
						font-size: 25rpx;
					}

					.time {
						height: 50rpx;
						padding: 0 25rpx;
						margin: 10rpx 0;
						border-radius: 50rpx;
						background-color: $theme-color;
						font-size: 35rpx;
						font-weight: bolder;
						@include flex-center;
						gap: 10rpx;
					}

					.msg-logo {
						margin-right: 60rpx;
					}
				}

				&:nth-child(2) {
					height: 302rpx;

					.title {
						padding-bottom: 30rpx;
					}

					.count {
						font-size: 35rpx;
						font-weight: bolder;
						padding: 0 10rpx;
					}

					.tip {
						font-size: 25rpx;
						line-height: 40rpx;
					}
				}
			}
		}

		.clock-in-btn {
			width: 562rpx;
			height: 88rpx;
			margin: 112rpx auto;
			background: #78FFE6;
			border-radius: 20rpx;
			background-color: $theme-color;
			text-align: center;
			font-weight: bolder;
			font-size: 32rpx;
			@include flex-center;

			&:active {
				opacity: 0.6;
			}
		}
	}
</style>
